<template>
  <div style="display: flex;align-items: center;gap: 10px;">
    <span>{{ userInfoStore?.welcome }}</span>
    <el-popover trigger="click"
      popper-style="box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); padding: 0px; background-color: #fff; border-radius: 8px;">
      <template #reference>
        <el-avatar class="avatar" :src="defaultAvatar" />
      </template>
      <template #default>
        <div style="display: flex; flex-direction: column; gap: 5px; padding: 10px; align-items: center;">
          <el-button text style="width: 100%;" size="small" @click="goUserCenter" plain>个人中心</el-button>
          <el-divider></el-divider>
          <el-button text style="width: 100%;" size="small" @click="logout" plain>注销</el-button>
        </div>
      </template>
    </el-popover>
  </div>

</template>

<script setup>
import { useRouter } from 'vue-router';

import { useAuthStore } from '../store/authStore'
import { useUserInfoStore } from '../store/userInfoStore';

const userInfoStore = useUserInfoStore();
const authStore = useAuthStore();

const router = useRouter();
const defaultAvatar = "https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExeDdhbGtlamtzNXpvajhvY2tiNm5lZGp3MDJudHdlNXVjcjR1ZXd3byZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/lMsT2f47tDxFMYdJMC/giphy.webp";

const goUserCenter = () => {
  router.push('/userCenter');
};

const logout = () => {
  // 清除本地存储的登录信息
  authStore.logout();
  // 跳转到登录页面
  router.push({ path: '/login' }); // 确保 '/login' 是你的登录页面路径
};
</script>

<style scoped>
.avatar {
  cursor: pointer;
  border-radius: 50%;
  /* 确保头像保持圆形 */
  border: 2px solid #fff;
  /* 白色边框，给头像一个轻微的边框效果 */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  /* 添加阴影效果 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
  margin-right: 50px;
}

.el-button+.el-button {
  margin-left: 0;
  /* 去除按钮间的间距 */
}

.el-divider--horizontal {
  margin: 0px;
}
</style>
